@use 'sass:color';
@use 'sass:math';
@use 'color/color' as color2;
@use 'color/brand';
@use 'color/neutral';

/** Base */
$jhlite-global-color-primary: brand.$jhlite-color-brand-400 !default;
$jhlite-global-color-light: #fff !default;
$jhlite-global-color-fill-primary: $jhlite-global-color-primary !default;
$jhlite-global-color-fill-primary-dark: color.change($jhlite-global-color-primary, $lightness: 40%) !default;
$jhlite-global-color-fill-primary-darker: color.change($jhlite-global-color-primary, $lightness: 15%) !default;
$jhlite-global-color-fill-light: $jhlite-global-color-light !default;
$jhlite-global-color-field-border: neutral.$jhlite-color-neutral-300;
$jhlite-global-color-field-border-focus: brand.$jhlite-color-brand-500;

/** Texts */
$jhlite-global-color-text-primary: brand.$jhlite-color-brand-400 !default;
$jhlite-global-color-text-dark: neutral.$jhlite-color-neutral-800;
$jhlite-global-color-text-light: #fff !default;
$jhlite-global-primary-color: brand.$jhlite-color-brand-700;
$jhlite-global-secondary-color: #0f172a;
$jhlite-global-line-color: var(--jhlite-line-color);
$jhlite-global-primary-alternative-color: #3e8abf;
$jhlite-global-primary-input-color: var(--jhlite-primary-input-color);
$jhlite-global-primary-text-color: #ddeffc;
$jhlite-global-box-radius: 6px;
$jhlite-global-applied-module-color: #2f7b17;
$jhlite-global-disabled-color: #6d6d6d;
$jhlite-global-color-text-light: #fff;
$jhlite-global-selectable-highlight-animation: valid-highlight-animation 2s infinite;
$jhlite-global-valid-highlight-start-color: #3ebf5a;
$jhlite-global-valid-highlight-end-color: #0f9020;
$jhlite-global-not-selectable-highlight-animation: invalid-highlight-animation 2s infinite;
$jhlite-global-invalid-highlight-start-color: #bf3e3e;
$jhlite-global-invalid-highlight-end-color: #900f0f;

@keyframes valid-highlight-animation {
  0% {
    background-color: $jhlite-global-valid-highlight-start-color;
    stroke: $jhlite-global-valid-highlight-start-color;
  }

  50% {
    background-color: $jhlite-global-valid-highlight-end-color;
    stroke: $jhlite-global-valid-highlight-end-color;
  }

  100% {
    background-color: $jhlite-global-valid-highlight-start-color;
    stroke: $jhlite-global-valid-highlight-start-color;
  }
}

@keyframes invalid-highlight-animation {
  0% {
    background-color: $jhlite-global-invalid-highlight-start-color;
    stroke: $jhlite-global-invalid-highlight-start-color;
  }

  50% {
    background-color: $jhlite-global-invalid-highlight-end-color;
    stroke: $jhlite-global-invalid-highlight-end-color;
  }

  100% {
    background-color: $jhlite-global-invalid-highlight-start-color;
    stroke: $jhlite-global-invalid-highlight-start-color;
  }
}

/** Other */
$jhlite-global-color-fill-disabled-dark: color.change($jhlite-global-color-primary, $saturation: 25%, $lightness: 40%) !default;
$jhlite-global-color-fill-disabled-light: color.change($jhlite-global-color-primary, $saturation: 20%, $lightness: 75%) !default;
$jhlite-global-color-text-disabled: color.change($jhlite-global-color-primary, $saturation: 25%, $lightness: 60%) !default;
$jhlite-global-color-fill-secondary: neutral.$jhlite-color-neutral-900 !default; // @deprecated
$jhlite-global-color-link-light: $jhlite-global-color-text-light !default; // @deprecated
$jhlite-global-color-link-light-hover: brand.$jhlite-color-brand-200 !default; // @deprecated
$jhlite-global-color-success: #480 !default;
$jhlite-global-color-error: #902 !default;
$jhlite-valid-highlight-animation: jhlite-valid-highlight-animation 2s infinite;
$jhlite-invalid-highlight-animation: jhlite-invalid-highlight-animation 2s infinite;
$jhlite-valid-highlight-start-color: #3ebf5a;
$jhlite-valid-highlight-end-color: $jhlite-global-color-success;
$jhlite-invalid-highlight-start-color: #bf3e3e;
$jhlite-invalid-highlight-end-color: $jhlite-global-color-error;
$jhlite-attention-highlight-color: #ffd700;
